<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-13 15:57:58
 * @LastEditTime : 2020-01-15 22:23:25
 * @LastEditors  : YJP
 -->
<template>
  <div class="index">
    <van-nav-bar 
    class="header"
    :title="$t('message.welcome')" 
    :right-text="$t('message.button')"
    :border="false">
      <div class="van-flex_" slot="right">
        <van-tag size="large" @click.stop="language=!language" color="#fff" text-color="#4d28df">{{language?'中':'EN'}}</van-tag>
      </div>
    </van-nav-bar>
    <van-cell-group
    class="group">
      <van-field
        size="large"
        v-model="user"
        :label="$t('message.tel')"
        :placeholder="$t('message.ipt_')"
        type="tel"
        clearable
        label-width="60"
        label-align="center"
      />
      <van-field
        label-align="center"
        label-width="60"
        clearable
        size="large"
        :placeholder="$t('message.ipt')"
        type="password"
        :label="$t('message.psw')"
        v-model="psw"
      />
    </van-cell-group>
    <div class="flex">
      <van-button class="regist" type="info" @click="Tap()" plain>{{$t('message.regist')}}</van-button>
      <van-button class='login' @click="Login()" type="info">{{$t('message.login')}}</van-button>
    </div>
  </div>
</template>
<script>
import api from "@/api/index";
export default {
  name: "Index",
  created() {
    console.log("api", api);
  },
  data() {
    return {
      psw: "",
      user: "",
      language: true,
      images: [
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    };
  },
  methods: {
    Tap() {
      this.$dialog
        .confirm({
          title: this.$t("message.hello"),
          message: this.$t("message.welcome")
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    EN() {
      this.$i18n.locale = "en";
      this.$Local("en");
    },
    ZH() {
      this.$i18n.locale = "zhCH";
      this.$Local("zhCH");
    },
    Login() {
      if(this.user && this.psw){
        api
        .getInfo(this.user)
        .then(res => {
          console.log("res", res);
        })
        .catch(err => {
          console.log("err", err);
        });
        this.$router.push("/active");
      }else{
        this.$toast("请输入用户名和密码");
      }
      
    },

    onClickLeft() {
      this.$toast("返回");
    },

    onClickRight() {
      this.$toast("按钮");
    }
  },
  watch: {
    language(newval, oldval) {
      if (newval == true) {
        this.ZH();
      } else {
        this.EN();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.group{
    width: 95%;
    box-shadow:0 2px 10px 0 rgba(0, 0, 0, .1);
    margin: 0 auto;
}
.login{
    background-color: #4d28df;
    border-color: #4d28df;
}
.regist{
    border-color: #4d28df;
    color:#4d28df;
}
.header{
    background-color:#4d28df;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .3);
    margin-bottom: 100px;
    .van-nav-bar__title{
        color:#fff;
    }
}
.index {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  .flex {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 40px auto;
  }
  .van-flex_ {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>